<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">温湿度报表</view>
		</cu-custom>
		<sear-ch :placeholder="'点击筛选按钮可根据时间筛选数据'" :disabl="true" @clean="clean" @input="input" @remove="remove" :message="message"></sear-ch>
		<screen-view ref="screen" @formSubmit="formSubmit" :isShow="false"></screen-view>
		<view style="margin-top: 110rpx;">
			<canvas canvas-id="canvasColumn" id="canvasColumn" :class="[rotate]" :style="{height:uheight + 'px'}" disable-scroll=true
			 @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
		</view>
		<view class="table-fixed" @tap="switchP">
			<image :class="[imgclass]" src="/static/images/phoneicon.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		ucharts,
		inputSearch
	} from "@/mixin/mixin.js"
	import {
		getReport,
		getselectReferList
	} from "@/service/selectList"
	import uCharts from '@/colorui/components/u-charts/u-charts.js'
	import SearCh from "@/colorui/components/search.nvue"
	import ScreenView from '@/colorui/components/ScreenView.vue'
	var canvaColumn = null;
	export default {
		mixins: [ucharts, inputSearch],
		data() {
			return {
				height: this.screenHeight,
				uheight: this.screenHeight - uni.upx2px(this.CustomBar + 115),
				dateleft: global.dateleft,
				dateright: global.dateright,
				page: 0,
				Column: "",
				rotate: 'charts-rotate',
				active: "竖屏",
				imgclass: "myimgtwo",
				cWidth: '',
				cWidth2: '',
				cHeight: '',
				cHeight2: '',
				pixelRatio: 1,
				textarea: "",
				message: '筛选',
				isShow: false,
				picker2: [{
						"LNAME": 1
					},
					{
						"LNAME": 2
					},
				],
				index1: 0,
				index2: 0,
				picker1: [],
			}
		},
		computed: {
			...mapGetters(["Style", 'Font', 'BackGround', 'BackGroundBox'])
		},
		components: {
			SearCh,
			ScreenView
		},
		onLoad() {

		},
		methods: {
			getServerData() {
				this.getReport()
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					fontSize: 11,
					padding: [5, 15, 15, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						margin: 5,
						borderWidth: 1
					},
					dataLabel: true,
					rotate: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 2,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						data: [{
							calibration: true,
							position: 'left',
							min: 0,
							max: 60,
							titleFontSize: 12,
							format: (val) => {
								return val.toFixed(0) + '度'
							}
						}, {
							calibration: true,
							position: 'right',
							min: 0,
							max: 60,
							titleFontSize: 12,
							format: (val) => {
								return val.toFixed(0) + '度'
							}
						}]
					},
					width: this.cWidth2 * this.pixelRatio,
					height: this.cHeight2 * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 0.45 / chartData.categories.length
						}
					},
				});

			},
			showColumn2(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					fontSize: 11,
					padding: [5, 15, 15, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						margin: 5,
						borderWidth: 1
					},
					dataLabel: true,
					rotate: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 2,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						//disabled:true
						data: [{
							calibration: true,
							position: 'left',
							min: 0,
							max: 60,
							titleFontSize: 12,
							format: (val) => {
								return val.toFixed(0) + '度'
							}
						}, {
							calibration: true,
							position: 'right',
							min: 0,
							max: 60,
							titleFontSize: 12,
							format: (val) => {
								return val.toFixed(0) + '度'
							}
						}]
					},
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 0.45 / chartData.categories.length
						}
					},
				});

			},
			touchColumn(e) {
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				canvaColumn.touchLegend(e, {
					animation: true,
				});
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			PickerChange2(e) {
				this.index2 = e.detail.value
			},
			formSubmit(e) {
				this.dateleft = e.picker1
				this.dateright = e.picker2
				this.getReport()
			},
			switchP() {
				if (this.active == '竖屏') {
					uni.showLoading({
						title: '加载中'
					});
					this.active = '横屏'
					this.imgclass = 'myimgone'
					setTimeout(() => {
						this.rotate = 'charts'
						this.showColumn2("canvasColumn", this.Column)
						uni.hideLoading();
					}, 1000)

				} else {
					uni.showLoading({
						title: '加载中'
					});
					this.active = '竖屏'
					this.imgclass = 'myimgtwo'
					setTimeout(() => {
						this.rotate = 'charts-rotate'
						this.showColumn("canvasColumn", this.Column)
						uni.hideLoading();
					}, 1000)
				}
			},
			getReport() {
				getselectReferList(9538, '表头', 'LCLASSINDEX', {}).then(res => {
					if (res.code != 0) {
						this.picker1 = res.data
						this.isShow = true
					}
				})
				let Column = {
					categories: [],
					series: []
				}
				let data = [{
					"LMACHINEID": 3 ,"LMACHINENO": "一车间",
					"LRUNTEXT": "温度",
					"LSUM": 10, "LTIME": 42
				},{
					"LMACHINEID": 3 ,"LMACHINENO": "一车间",
					"LRUNTEXT": "湿度",
					"LSUM": 45 ,"LTIME": 23
				},{
					"LMACHINEID": 3, "LMACHINENO": "二车间",
					"LRUNTEXT": "温度",
					"LSUM": 23 ,"LTIME": 25
				},{
					"LMACHINEID": 3 ,"LMACHINENO": "二车间",
					"LRUNTEXT": "湿度",
					"LSUM": 30, "LTIME": 41
				},{
					"LMACHINEID": 3, "LMACHINENO": "三车间",
					"LRUNTEXT": "温度",
					"LSUM": 23 ,"LTIME": 25
				},{
					"LMACHINEID": 3 ,"LMACHINENO": "三车间",
					"LRUNTEXT": "湿度",
					"LSUM": 30, "LTIME": 41
				},{
					"LMACHINEID": 3, "LMACHINENO": "四车间",
					"LRUNTEXT": "温度",
					"LSUM": 23 ,"LTIME": 25
				},{
					"LMACHINEID": 3 ,"LMACHINENO": "四车间",
					"LRUNTEXT": "湿度",
					"LSUM": 30, "LTIME": 41
				}]
				data.forEach((val, index) => {
					Column.categories.push(val.LRUNTEXT)
				})
				Column.categories = [...new Set(Column.categories)]
				data.forEach((val, index) => {
					if (val.LRUNTEXT == Column.categories[0]) {
						Column.series.push({
							"data": [],
							"name": val.LMACHINENO + '(单位/度)'
						})
						Column.series.push({
							"data": [],
							"name": val.LMACHINENO + '(单位/度)'
						})
					}
				})
				Column.categories.forEach((item, iindex) => {
					data.forEach((val, index) => {
						Column.series.forEach((uval, uindex) => {
							if ((val.LMACHINENO + '(单位/度)') == uval.name && item == val.LRUNTEXT || (val.LMACHINENO + '(单位/度)') ==
								uval.name && item == val.LRUNTEXT) {
								if (this.page == 0) {
									uval.data.push(val.LSUM)
									this.page = 1
									return
								}
								if (this.page == 1) {
									uval.data.push(val.LTIME)
									this.page = 0
									return
								}
							}
						})
					})
				})
				this.Column = Column
				this.showColumn("canvasColumn", Column);
			}

		}
	}
</script>

<style>

</style>
